<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>报关公司注册</title>
    <style>
        body, h2 {
            padding: 0px;
            margin: 0px auto;
        }

        h2 {
            color: #FFFFFF;
            padding: 10px 100px;
        }

        span {
            color: #FF0000;
        }

        #shoulder {
            padding: 10px 100px;
            line-height: 28px;
        }

        #fore {
            text-align: right;
            padding: 5px;
            width: 60px;
            white-space: nowrap;
        }

        #back {
            text-align: left;
            padding: 5px;
            width: 250px;
        }

        #tab {
            margin-left: 100px;
            width: 100%;
            text-align: center;
        }

        #tab th {
            white-space: nowrap;
        }

        div {
            width: 300px;
            position: relative;
            /*     margin: 20px 0; */
            padding: 5px 10px;
        }

        .form_control {
            border: 1px #ccc solid;
        }

        input[type="text"], input[type="password"] {
            border: none;
            width: 100%;
        }

        .form_control.active {
            border: 1px #32BC61 solid;
            background-color: #fff;
        }

        .form_control.error {
            border: 1px #f00 solid;
            background-color: #FBF9BB;
        }

        .form_control.error input[type="text"], .form_control.error input[type="password"] {
            background-color: #FBF9BB;
            color: #f00;
        }

        input[type="text"]:focus, input[type="password"]:focus {
            border: none;
            outline: none;
        }

        .form_control .valid_message {
            color: #32BC61;
            position: absolute;
            left: 325px;
            top: 5px;
            width: 200px;
        }

        .form_control.error .valid_message {
            color: #f00;
        }

        .form_control.success .valid_message {
            background: url(img/register/sucess.png) no-repeat;
            left: auto;
            right: 5px;
            top: 4px;
            width: 16px;
            height: 16px;
        }

        .none {
            display: none;
        }

        .custom-combobox {
            position: relative;
            display: inline-block;
        }

        .custom-combobox-toggle {
            position: absolute;
            top: 0;
            bottom: 0;
            margin-left: -1px;
            padding: 0;
            /* 支持： IE7 */
            *height: 1.7em;
            *top: 0.1em;
        }

        .custom-combobox-input {
            margin: 0;
            padding: 0.3em;
        }

        ul.ui-widget-content.ui-corner-all {
            height: 200px;
            overflow: auto;
        }
    </style>

    <link rel="stylesheet" type="text/css"
          href="css/jquery/combobox/jquery-ui.min-1.10.4.css"/>
    <script type="text/javascript" src="<s:url value='/js/BrowserDetect.js'  />"></script>
    <script type="text/javascript"
            src="js/jquery/combobox/jquery.min-1.10.2.js"></script>
    <script type="text/javascript"
            src="js/jquery/combobox/jquery-ui.min-1.10.4.js"></script>
    <script type="text/javascript" src="js/register/jquery-validate.js"></script>
    <script type="text/javascript">
        var addPortDataToCombobox = function () {

        }
        $(function () {
            $.ajax({
                       url: "reg-findPort",
                       dateType: "json",
                       type: "post",
                       success: function (data) {
                           var optionstring = "";
                           for (var i = 0; i < (data.content).length; i++) {
                               optionstring += "<option value=\"" + data.content[i].code + "\" >"
                                               + "(" + data.content[i].code + ") "
                                               + data.content[i].name + "</option>";
                           }
                           $("#servicePort").html(optionstring);
                       }
                   });

            //输入提示方法
            $("#regForm").validate({
                                       onFocus: function () {
                                           this.parent().addClass('active');
                                           return false;
                                       },
                                       onBlur: function () {
                                           var $parent = this.parent();
                                           var _status = parseInt(this.attr('data-status'));
                                           $parent.removeClass('active');
                                           if (!_status) {
                                               $parent.addClass('error');
                                           }
                                           return false;
                                       }
                                   });

            $("#servicePort").combobox();

        });

        (function ($) {
            $.widget("custom.combobox",
                     {
                         _create: function () {
                             this.wrapper = $("<span>").addClass(
                                     "custom-combobox").insertAfter(this.element);
                             this.element.hide();
                             this._createAutocomplete();
                             this._createShowAllButton();
                         },
                         _createAutocomplete: function () {
                             var selected = this.element
                                     .children(":selected"), value = selected
                                                                             .val()
                                     ? selected.text() : "";
                             this.input =
                                     $("<input>")
                                             .appendTo(this.wrapper)
                                             .val(value)
                                             .attr("title", "")
                                             .attr("id", "servicePortSelect")
                                             .attr("name", "service_port")
                                             .attr("data-tip", "请选择提供报关服务范围")
                                             .attr("data-valid", "isNonEmpty")
                                             .attr("data-error", "服务口岸不能为空")
                                             .addClass(
                                                     "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left required")
                                             .autocomplete({
                                                               delay: 0,
                                                               minLength: 0,
                                                               source: $.proxy(this, "_source")
                                                           }).tooltip({
                                                                          tooltipClass: "ui-state-highlight"
                                                                      });
                             this._on(this.input, {
                                 autocompleteselect: function (event, ui) {
                                     ui.item.option.selected = true;
                                     this._trigger("select", event, {
                                         item: ui.item.option
                                     });
                                     //service_port_id
                                     var service_port_val = $("#servicePort").val();
                                     $("#servicePortCode").val(service_port_val);
                                 },
                                 autocompletechange: "_removeIfInvalid"
                             });
                         },

                         _createShowAllButton: function () {
                             var input = this.input, wasOpen = false;
                             $("<a>").attr("tabIndex", -1)
                             // 										.attr("title", "Show All Items")
                                     .tooltip()
                                     .appendTo(this.wrapper)
                                     .button(
                                             {
                                                 icons: {
                                                     primary: "ui-icon-triangle-1-s"
                                                 },
                                                 text: false
                                             })
                                     .removeClass("ui-corner-all")
                                     .addClass(
                                             "custom-combobox-toggle ui-corner-right")
                                     .mousedown(
                                             function () {
                                                 wasOpen = input
                                                         .autocomplete(
                                                                 "widget")
                                                         .is(":visible");
                                             }).click(function () {
                                 input.focus();
                                 // 如果已经可见则关闭
                                 if (wasOpen) {
                                     return;
                                 }
                                 // 传递空字符串作为搜索的值，显示所有的结果
                                 input.autocomplete("search", "");
                             });
                         },
                         _source: function (request, response) {
                             var matcher = new RegExp($.ui.autocomplete
                                     .escapeRegex(request.term), "i");
                             response(this.element
                                              .children("option")
                                              .map(
                                                      function () {
                                                          var text = $(this).text();
                                                          if (this.value
                                                              && (!request.term || matcher
                                                                          .test(text)))
                                                              return {
                                                                  label: text,
                                                                  value: text,
                                                                  option: this
                                                              };
                                                      }));
                         },
                         _removeIfInvalid: function (event, ui) {
                             // 选择一项，不执行其他动作
                             if (ui.item) {
                                 return;
                             }
                             // 搜索一个匹配（不区分大小写）
                             var value = this.input.val(), valueLowerCase = value
                                     .toLowerCase(), valid = false;
                             this.element
                                     .children("option")
                                     .each(
                                             function () {
                                                 if ($(this).text()
                                                             .toLowerCase() === valueLowerCase) {
                                                     this.selected = valid = true;
                                                     return false;
                                                 }
                                             });
                             // 找到一个匹配，不执行其他动作
                             if (valid) {
                                 return;
                             }
                             // 移除无效的值
                             this.input.val("")
                             // 								.attr("title", value + " didn't match any item")
                                     .tooltip("open");
                             this.element.val("");
                             this._delay(function () {
                                 this.input.tooltip("close").attr("title",
                                                                  "");
                             }, 2500);
                             this.input.data("ui-autocomplete").term = "";
                         },
                         _destroy: function () {
                             this.wrapper.remove();
                             this.element.show();
                         }
                     });
        })(jQuery);

        function regSubmit() {
            if (!$("#regForm input[name*=com_name]").val()) {
                alert("请填写公司名称!");
                return;
            } else if (!$("#regForm input[name*=com_code]").val()) {
                alert("请填写公司代码!");
                return;
            } else if (!$("#regForm input[name*=com_link_person]").val()) {
                alert("请填写公司联系人!");
                return;
            } else if (!$("#regForm input[name*=com_link_phone]").val()) {
                alert("请填写公司联系人电话!");
                return;
            } else if (!$("#regForm input[name*=com_email]").val()) {
                alert("请填写公司邮箱!");
                return;
            } else if (!$("#regForm input[name*=com_address]").val()) {
                alert("请填写公司地址!");
                return;
            } else if (uploadFrame.contentWindow.document.getElementById('dataGrid').rows.length
                       < 2) {
                alert("请上传公司资料文件!");
                return;
                //} else if (fileChange($("#regForm_attach")[0])) {
                //   alert("上传文件不能大于5M,请重新上传!");
                //   return;
            } else {
                var com_name = $("#regForm input[name*=com_name]").val();
                $.ajax({
                           url: "reg-checkRegCompanyExist",
                           type: "POST",
                           dataType: "json",
                           data: {"com_name": com_name, "com_type": "CC"},
                           success: function (data) {
                               if ($.parseJSON(data.msg) != null) {
                                   var state = $.parseJSON(data.msg).state;
                                   var msg = $.parseJSON(data.msg).msg;
                                   if (state == "1") {
                                       alert(msg);
                                   } else {
                                       regForm.submit();
                                   }
                               }
                           }
                       });
            }
        }

        var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
        function fileChange(target) {
            var fileSize = 0;
            if (isIE && !target.files) {
                var filePath = target.value;
                var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
                var file = fileSystem.GetFile(filePath);
                fileSize = file.Size;
            } else {
                fileSize = target.files[0].size;
            }
            var size = fileSize / 1024;
            if (size > 5000) {
                return true;
            }
        }
    </script>
</head>
<body>
<div id="wrapper" align="center">
    <!-- 		<div id="head"> -->
    <!-- 			<h2>报关公司注册</h2> -->
    <!-- 		</div> -->
    <div id="shoulder">
        <form id="regForm" action="reg-doDeclarationRegistered"
              enctype="multipart/form-data" method="POST">

            <input id="bill_no" type="hidden" name="bill_no"/>
            <table border="0" cellspacing="10" cellpadding="10">
                <tr>
                    <td colspan="2" align="center">
                        <div id="head">
                            <h2>报关公司注册</h2>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>公司名称：</td>
                    <td>
                        <div class="form_control">
                            <input class="required" type="text" name="com_name"
                                   data-tip="请输入您的公司全称" data-valid="isNonEmpty"
                                   data-error="公司名称不能为空">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>统一社会信用代码：</td>
                    <td>
                        <div class="form_control">
                            <input class="required" type="text" name="com_code"
                                   data-tip="请输入您的统一社会信用代码" data-valid="isNonEmpty||between:18-18"
                                   data-error="统一社会信用代码不能为空||统一社会信用代码长度为18位">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>海关企业注册代码：</td>
                    <td>
                        <div class="form_control">
                            <input class="required" type="text" name="com_customs_code"
                                   data-tip="请输入您的海关企业注册代码" data-valid="isNonEmpty||between:10-10"
                                   data-error="海关企业注册代码不能为空||海关企业注册代码长度为10位">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>服务口岸：</td>
                    <td>
                        <div class="form_control">
                            <select id="servicePort"></select> <input id="servicePortCode"
                                                                      name="service_port_code"
                                                                      type="hidden"/>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>公司联系人：</td>
                    <td>
                        <div class="form_control">
                            <input class="required" type="text" name="com_link_person"
                                   data-tip="请输入您的公司联系人" data-valid="isNonEmpty"
                                   data-error="公司联系人不能为空">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>联系人电话：</td>
                    <td>
                        <div class="form_control">
                            <input class="required" type="text" name="com_link_phone"
                                   data-tip="请输入您的联系人电话" data-valid="isNonEmpty"
                                   data-error="联系人电话不能为空">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>公司邮箱：</td>
                    <td>
                        <div class="form_control">
                            <input class="required" type="text" name="com_email"
                                   data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail"
                                   data-error="邮箱不能为空||邮箱格式不正确">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>公司地址：</td>
                    <td>
                        <div class="form_control">
                            <input class="required" type="text" name="com_address"
                                   data-tip="请输入您的公司地址" data-valid="isNonEmpty"
                                   data-error="公司地址不能为空">
                        </div>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <p style="margin-left: 100px;">
                            <script>
                                function generateUUID() {
                                    var d = new Date().getTime();
                                    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(
                                            /[xy]/g, function (c) {
                                                var r = (d + Math.random() * 16) % 16 | 0;
                                                d = Math.floor(d / 16);
                                                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(
                                                        16);
                                            });
                                    return uuid;
                                }
                                ;
                                var ruid = generateUUID();
                                $(function () {
                                    bill_no.value = generateUUID();
                                    uploadFrame.src =
                                            '/business/uploadMain?type=reg#' + bill_no.value;
                                })
                            </script>
                            <iframe id="uploadFrame" height=250 width=500 frameborder="no"
                                    border="0" marginwidth="0" marginheight="0"></iframe>
                        </p>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <p style="color: red;">上传文件说明：请将营业执照、税务登记证、组织机构代码证、海关注册登记证等文件打包上传.</p>
                    </td>
                </tr>
                <tr align="center">
                    <td colspan="2" id="bt" align="center"><input type="button"
                                                                  id="button" name="bt"
                                                                  value="同意条款  立即注册"
                                                                  onclick="javascript:regSubmit();"/>
                    </td>
                </tr>
            </table>
            </form>
    </div>
</div>
</body>

</html>

